.vpn-connected
    color: #38A169 !important

.vpn-disconnected
    color: #E53E3E !important
    animation: blinker 1s linear infinite

.filter-bar
    z-index: 10
    width: 100%
    opacity: .97
    height: 35px
    background-color: $FilterBarBg
    -webkit-user-select: none
    position: absolute
    top: $TitleHeight
    height: $FilterBarHeight
    box-shadow: $TopBarShadow

    .source
        box-sizing: content-box
        color: $FilterBarText
        text-align: center
        cursor: pointer
        height: 20px
        margin-top: 10px
        padding: 0px 15px 1px 18px

        &:hover
            color: $FilterBarTextHover

        &.active
            border-bottom: 4px solid $FilterBarActive

    .nav.filters
        float: left
        margin-left: 10px

    .nav.right
        margin-right: 5px

    .filter
        padding: 10px 0 0
        margin-left: 20px

        & > a
            display: inline-block
            padding: 0
            color: $FilterBarText
            background-color: transparent !important

            &:hover
                color: $FilterBarTextHover
        .value
            color: $FilterBarActive
            padding-left: 10px

        .dropdown-menu
            font-size: 0.9em
            scrollable()
            max-height: 445px
            margin-top: 11px
            border-top-left-radius: 0
            border-top-right-radius: 0

    i
        transition: color 0.5s
        margin: 10px 5px 0
        color: $FilterBarIcon
        font-size: 1.5em
        &:hover
            color: $FilterBarIconHover
            cursor: pointer

        &.active
            &.favorites
                color: $FavoriteColor
                &:hover
                    color darken($FavoriteColor, 10)
                    transition all .5s

            &.watchlist
                color: $FilterBarActive

            &.torrent-collection
                color: $FilterBarActive

            &.about
                color: $FilterBarIconHover

            &.vpn
                color: $FilterBarIconHover
            &.seedbox
                color: $FilterBarActive

    .clear
        display: none

    .search
        form
            &:before
                content: '\f002'
                font-family: "Font Awesome 5 Free"
                font-weight: 900
                font-style: normal
                transition color 0.5s
                color: $FilterBarIcon
                position: absolute
                top:11px
                left: 7px
                z-index: 2
                font-size: 1.4em

            &.edited .clear
                display: block
                font-weight: bold
                transition color 0.5s
                color: $FilterBarIcon
                position: absolute
                top:8px
                right: 5px
                padding: 3px 5px
                font-size: 1.2em

            &.edited input, input:focus
                width: 130px
                background-color: $SearchBoxBg
                color: $FilterBarText

            &.edited, &:hover
                cursor: pointer
                &:before
                    color: $FilterBarIconHover

            input
                line-height normal
                -webkit-app-region no-drag
                outline none
                cursor text
                width 0px
                height 18px
                position relative
                background $FilterBarBg no-repeat right center
                background-position right 3px center
                border solid 0px
                margin 8px 3px 0
                padding 1px 2px 3px
                padding-left 25px
                border-radius 10em
                -webkit-appearance textfield
                -webkit-box-sizing content-box
                transition width 0.5s

                &:focus
                    cursor: auto
                    &:before
                        color: $FilterBarIconHover //this doesn't work for some reason

                &::-moz-placeholder,
                &::-webkit-input-placeholder
                    color: transparent

                &:focus::-webkit-input-placeholder
                    color: rgba($FilterBarText,.7)
